<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .fangda {
            width: 350px;
            height: 400px;
            margin: 100px;
            position: relative;
            border: 1px solid #ccc;
        }

        .fdtop {
            height: 350px;
        }

        .fdbottom {
            height: 50px;

        }

        .fdbottom ul {
            display: flex;
            justify-content: space-around;
        }

        .fdbottom ul li {
            height: 50px;
            width: 50px;
            float: left;
            border: 2px solid white;
        }

        .fdbottom ul li img {
            height: 50px;
        }

        .mask {
            height: 200px;
            width: 200px;
            background-color: yellow;
            opacity: 0.5;
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
            display: none;
            pointer-events: none;
        }

        .big {
            display: none;
            border: 1px solid #ccc;
            height: 500px;
            width: 500px;
            background-color: blue;
            position: absolute;
            top: 0;
            left: 380px;
            overflow: hidden;
        }

        .big img {
            position: absolute;
            top: 0;
            left: 0px;
            height: 800px;
        }
    </style>
</head>

<body>
    <div class="fangda">
        <div class="mask"></div>
        <div class="big"><img src="img/0.jpg" alt="" class="bigImg"></div>
        <div class="fdtop"><img src="img/0.jpg" alt=""></div>
        <div class="fdbottom">
            <ul>
                <li><img src="./img/0.jpg" alt=""></li>
                <li><img src="./img/1.jpg" alt=""></li>
                <li><img src="./img/2.jpg" alt=""></li>
                <li><img src="./img/3.jpg" alt=""></li>
                <li><img src="./img/4.jpg" alt=""></li>
            </ul>
        </div>
    </div>
    <script>
        // 获取元素
        var fangda = document.querySelector('.fangda')
        var fdtop = document.querySelector('.fdtop');
        var img = document.querySelector('.fdtop').querySelector('img');
        var big = document.querySelector('.big');
        var mask = document.querySelector('.mask');
        var bigImg = document.querySelector('.bigImg');
        var lis = document.querySelector('.fdbottom').querySelector('ul').querySelectorAll('li');

        for (let i = 0; i < lis.length; i++) {
            lis[i].onmouseenter = function () { // 设置触碰下面的5个图的事件 
                img.src = `img/${i}.jpg`; // 触碰到哪个小图的时候 上面的大图也随之改变
                big.querySelector('img').src = `img/${i}.jpg`; // 设置右边的放大图也随之改变
                for (let i = 0; i < lis.length; i++) {
                    lis[i].style.border = ''; // 设置清除触碰时边框 排他思想
                }
                lis[i].style.border = '2px solid red'; // 设置触碰时边框
            }
        }
        fdtop.addEventListener('mouseover', function () { // 设置鼠标触碰上面的大图 右边的大图和黄色的定位框出现
            big.style.display = 'block';
            mask.style.display = 'block';
        })
        fdtop.addEventListener('mouseleave', function () {// 设置鼠标离开上面的大图 右边的大图和黄色的定位框消失
            big.style.display = 'none';
            mask.style.display = 'none';
        })
        fdtop.addEventListener('mousemove', function (e) { // 设置鼠标移动事件
            var x = e.pageX - fdtop.getBoundingClientRect().x; // x为鼠标当前x位置（e.pageX）- 外边盒子距离浏览器边缘的位置
            var y = e.pageY - fdtop.getBoundingClientRect().y; // 同上
            var maskX = x - mask.getBoundingClientRect().x / 2; // 原本的框框是左上角随着鼠标移动 maskX是x - mask.getBoundingClientRect().x / 2(也就是框框的一半)
            var maskY = y - mask.getBoundingClientRect().y / 2; // 同上 使鼠标在框框的中间
            if (maskX <= 0) { // 判断x左右的最大值 不让框框出现在外面
                maskX = 0;
            } else if (maskX >= 150) { 
                maskX = 150;
            }
            if (maskY <= 0) { // 同上
                maskY = 0;
            } else if (maskY >= 150) {
                maskY = 150;
            }
            mask.style.left = maskX + 'px'; // 给框框赋值 值会变化 随鼠标位置变化
            mask.style.top = maskY + 'px';
            bigImg.style.left = -maskX * 2 + 'px'; // 给大图赋值 值会变化 随鼠标位置变化 也就是 随着框框变化
            bigImg.style.top = -maskY * 2 + 'px';
        })
    </script>
</body>

</html>